<template>
  <!-- tabs标签页 -->
  <van-tabs
    class="van-tabs"
    v-model:active="active"
    lazy-render
    sticky
    swipeable
    offset-top="54"
    @change="jumpTab"
    @rendered="jumpTab"
  >
    <van-tab v-for="(item, index) in tabList" :title="item.title" :name="item.name" :key="index">
      <!-- {{ item.title }} -->
      <div v-if="item.name == active">
        <router-view></router-view>
      </div>
    </van-tab>
    <template #nav-right>
      <div @click="channelBtn">
        <img id="tabs-img" src="@/assets/icon-img/fenlei.png" alt="" />
      </div>
    </template>
  </van-tabs>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
export default {
  components: {},
  setup() {
    const tab = [
      {
        title: '推荐',
        name: 'homepage'
      },
      {
        title: '精选',
        name: 'choiceness'
      },
      {
        title: '合集',
        name: 'compilations'
      },
      {
        title: '小视频',
        name: 'smallVideo'
      },
      {
        title: '影视',
        name: 'filmsAndTelevision'
      }
    ]
    const tabList = reactive(tab)
    const onClickLeft = () => history.back()
    const active = ref('topSearch')
    const router = useRouter()
    const channelBtn = () => {
      router.push('/channel')
    }
    const jumpTab = (name) => {
      router.push({ name })
    }
    onMounted(() => {
      jumpTab()
    })
    return {
      tabList,
      active,
      onClickLeft,
      channelBtn,
      jumpTab
    }
  },
}
</script>

<style lang="scss" scoped>
// .home-tabs-view {
//   height: 78vh;
//   overflow-y: auto;
// }
// 分类tab标签页
#tabs-img {
  margin-top: 5px;
  width: 30px;
  height: 30px;
}
</style>
